<template>
  <a-menu slot="overlay">
    <template v-for="item in customMenuItems">
      <template v-if="shouldRenderSubMenu(item)">
        <a-sub-menu :key="item.key">
          <span slot="title">{{ item.title }}</span>
          <a-menu-item v-for="menuItem in item.children" :key="menuItem.key" @click="handleClick(menuItem)">{{
            menuItem.title
          }}</a-menu-item>
        </a-sub-menu>
      </template>
      <template v-else>
        <a-menu-item :key="item.key"   @click="handleClick(item)">{{ item.title }}</a-menu-item>
      </template>
    </template>
  </a-menu>
</template>

<script>
export default {
  props: {
    customMenuItems: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    // 过滤children
    shouldRenderSubMenu(item) {
      return item.children && item.children.length > 0;
    },
    // 菜单项点击触发
    handleClick(item) {
      // console.log(item.title);
      this.$emit('right-click',item.title)
      console.log(`菜单项 ${item.key} 被点击`);
    },
  },
};
</script>
